<!--<template>-->
<!--<div class="ui-template-form">-->
<!--<el-form :model="formData" label-width="100px" label-position="right" ref="form">-->
<!--<el-form-item-->
<!--v-for="item in config"-->
<!--:label="__(item.label)"-->
<!--:prop="item.key"-->
<!--:required="item.required"-->
<!--:rules="getRules(__(item.label))">-->
<!--<el-input-->
<!--:placeholder="__(item.placeholder)"-->
<!--:type="item.type"-->
<!--v-model="formData[item.key]"></el-input>-->
<!--</el-form-item>-->
<!--</el-form>-->
<!--</template>-->

<script>
  import { Form, FormItem, Button } from 'element-ui'
  import * as renderMap from './common-render'
  import * as rulesMap from './rules'
  export default {
    props: {
      formModel: {
        type: Object,
        default () {
          return {
            ref: 'form'
          }
        }
      },
      config: {
        required: true
      },
      rawData: {
        type: Object,
        default () {
          return {}
        }
      },
      loading: false,
      footer: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        formDataMap: { ...this.rawData }
      }
    },
    methods: {
      makeParam (item, result = {}, self) {
        item.value = item.value || ''
        item.key = item.key || item.value
//        const props = { result }
        return {
          domProps: {
            value: self.formDataMap[item.key] || ''
          },
          props: {
//            ...props,
            value: self.formDataMap[item.key] || ''
          },
          on: {
            input: val => {
              self.formDataMap[item.key] = val
            }
          }
        }
      },
      makeItemProps (item) {
        return {
          props: {
            label: item.label,
            rules: item.rules,
            prop: item.key,
            required: item.required
          }
        }
      },
      defaultFooter (h, item, self) {
        const { handleSubmit, handleCancel } = this
        return (<el-form-item>
          <el-button type="primary" loading={this.loading} on-click={ handleSubmit }>{this.__('保存')}</el-button>
          <el-button on-click={ handleCancel }>{this.__('取消')}</el-button>
        </el-form-item>)
      },
      makeChildren (h, item, self) {
        let childrens = item.render && item.render(h, item, self) || []
        if (!item.disabledRender && Array.isArray(item.options) && item.options.length) {
          childrens = childrens.concat(item.options.map(option => {
            return h(item.optionComponentName, option)
          }))
        }
        return childrens
      },
      makeFormItem (h, item, self) {
        const { makeParam, makeChildren } = self
        let componentName = item.componentName || 'div'
        if (item.slotKey) {
          return (<el-form-item {... this.makeItemProps(item)}>{this.$slots[item.slotKey]}</el-form-item>)
        }

        if (componentName === 'el-radio') {
          componentName = 'div'
        }
        return (<el-form-item {... this.makeItemProps(item)}>
          {h(componentName, makeParam(item, this.formDataMap, self), makeChildren(h, item, self))}
        </el-form-item>)
      },
      handleSubmit () {
        this.$refs[this.formModel.ref].validate(valid => {
          if (valid) {
            this.$emit('submit', this.formDataMap)
          }
        })
      },
      handleCancel () {
        this.$emit('close')
      },
      valid () {
        return this.$refs[this.formModel.ref] && this.$refs[this.formModel.ref].validate
      }
    },
    watch: {
      rawData (val) {
        this.formDataMap = val
      }
    },
    computed: {
      configs () {
        return Object.keys(this.config).map(key => {
          const item = this.config[key]
          renderMap[item.componentName] && (Object.assign(item, renderMap[item.componentName]))
          if (Array.isArray(item.rules) && item.rules.length) {
            item.rules.forEach(rule => {
              rule.message = this.__(rule.message)
              rule.validator && rulesMap[rule.validator] && (rule.validator = rulesMap[rule.validator].bind(this))
            })
          }
          return item
        })
      }
    },
    render (h, ctx) {
      const { makeFormItem } = this
      const self = this
      const options = {
        ...this.formModel,
        props: {
          model: self.formDataMap
        }
      }
      return (<el-form { ...options } class="ui-template-form">{
        Object.keys(this.configs).map(key => {
          return makeFormItem(h, this.config[key], self)
        })
      }
        {self.footer ? this.defaultFooter(h, {}, self) : null}
      </el-form>)
    }, mapComponents: {
      Form, FormItem, Button
    }

  }
</script>
